@media (max-width:1199px) and (min-width:770px){
    .box-top .header{
        width: 100%;
    }
    .main{
        width: 100%;
    }
}

@media (max-width:769px){
    .box-top .header{
        width: 100%;
        text-align: center;
    }
    .box-top .header ul{
        position: absolute;
        top: 6rem;
        left: 0;
        width: 100%;
        margin-left: 0;
        background-color:skyblue;
    }
    .box-top .header ul li{
        width: 100%;
        text-align: center;
        color: #fff;
    }
    .box-top .header ul li:hover{
        background-color: #80a5eb;
    }
    .box-top .header ul li + li{
        margin-left: 0;
    }
    .box-top .header .btn{
        display: block;
    }


    .main{
        width: 100%;
    }
    .main ul li{
        width: calc(50% - 2rem);
    }
    .main ul li:nth-child(4n+1){
        margin-left: 2rem;
    }
    .main ul li:nth-child(2n+1){
        margin-left: 0;
    }
}
